<template>
  <div class="goodsList">
    <van-nav-bar
      title="商品搜索"
      left-text="返回"
      nav-bar-text-color="@white"
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="top-search">
      <div class="w">
        <div class="top">
          <form class="search">
            <i class="iconfont icon-magnifier"></i>
            <input type="text" placeholder="请输入关键字" v-model="keywords" />
          </form>
        </div>

        <div class="nav">
          <ul>
            <li><a href="#" class="recommend">综合推荐</a></li>
            <li><a href="#">销量</a></li>
            <li>
              <a href="#"
                >价格<i class="iconfont icon-icon_-shangxiajiantou"></i
              ></a>
            </li>
            <li><a href="#">好评度</a></li>
            <li><a href="#">店铺</a></li>
            <li>
              <a href="#"><i class="iconfont icon-shaixuan"></i>筛选</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div v-if="list === null">
      <van-empty description="暂无数据~换个关键字试一试~">
        <van-button
          color="linear-gradient(to right, #ff6034, #ee0a24)"
          round
          @click="$router.push('/index/home')"
        >
          随便逛逛
        </van-button>
      </van-empty>
    </div>

    <!-- 商品展示 -->
    <div class="show" v-else>
      <div class="inner">
        <article>
          <section
            style="border-bottom: 1px solid #aaaaaa; padding-bottom: 1.3rem"
            v-for="item in list"
            :key="item.id"
            @click="toDetail(item.id)"
          >
            <img :src="$pregImg + item.img" alt="" />

            <div>
              <p>{{ item.goodsname }}</p>

              <p>
                <span style="color: #eb775e">&yen;{{ item.price }}&nbsp;</span>
              </p>
              <p><span>999条评论</span></p>
            </div>
          </section>
        </article>
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions, mapGetters } from "vuex";
export default {
  data() {
    return {
      keywords: " ",
    };
  },
  computed: {
    ...mapGetters({
      list: "searchList/list",
    }),
  },
  methods: {
    ...mapActions({
      requestList: "searchList/listActions",
    }),
    onClickLeft() {
       if (sessionStorage.getItem("path") === "/index/home") {
        this.$toast.success("返回到上级");
        this.$router.push("/index/home");
      } else if (sessionStorage.getItem("path") === "/index/cate") {
        this.$toast.success("返回到上级");
        this.$router.push("/index/cate");
      } else if (sessionStorage.getItem("path") === "/goodsList") {
        this.$toast.success("返回到上级");
        this.$router.push("/goodsList");
      } else {
        this.$toast.success("返回到上一级");
        this.$router.back(); 
      }
    },
    toDetail(id) {
      this.$router.push({
        path: "/details/" + id,
        query: {
          keywords: this.keywords,
          path: "/goodsSearch",
        },
      });
    },
  },
  watch: {
    keywords(val) {
      this.requestList(val);
    },
  },
  mounted() {
    if (this.$route.query.path === "/index/home") {
      sessionStorage.setItem("path", "/index/home");
    } else if (this.$route.query.path === "/index/cate") {
      sessionStorage.setItem("path", "/index/cate");
    } else if (this.$route.query.path === "/goodsList") {
      sessionStorage.setItem("path", "/goodsList");
    }
    this.keywords = this.$route.query.keywords;
    this.requestList(this.$route.query.keywords);
     document.title=this.$route.meta.title
  },
};
</script>

<style scoped>
.search {
  width: 2.7rem;
}
.topSearch {
  width: 2.7rem;
}
/* * 顶部返回字体样式  */
/deep/.van-nav-bar {
  background: #ff6040;
}
/deep/ .van-nav-bar__title {
  font-size: 0.18rem;
  font-weight: bold;
  color: #fff;
}
/deep/ .van-nav-bar__text {
  font-size: 0.12rem;
  color: #fff;
}
/deep/ .van-nav-bar .van-icon {
  font-size: 0.12rem;
  color: #fff;
}

/deep/ [class*="van-hairline"]::after {
  border: none;
}
/deep/ .van-nav-bar__content {
  height: 48px;
}
</style>